<template>
  <div class="dialog">
    <el-dialog v-model="dialogTableVisible" :title="props.title" @close="props.close">
      <log1 v-if="props.title === 'Sell'" :close="props.close" :item="props.item" :allow="props.allow" :submit="props.sell"></log1>
<!--      <log2></log2>-->
      <log3 v-if="props.title === 'Wait'" :close="props.close"></log3>
      <log4 v-if="props.title === 'Transfer'" :close="props.close" :submit="props.transfer"></log4>
      <log5 v-if="props.title === 'Buy Now'" :item="props.item" :allow="props.allow" :buy="props.buy" :approve="props.approve"></log5>
    </el-dialog>
  </div>
</template>

<script setup>
    import log1 from './common/log1.vue'
    import log2 from './common/log2.vue'
    import log3 from './common/log3.vue'
    import log4 from './common/log4.vue'
    import log5 from './common/log5.vue'
    import log6 from './common/log6.vue'
    import {defineProps, ref} from 'vue'
    const props = defineProps({
      title: {
        type: String
      },
      item: {
        type: Object
      },
      close: {
        type: Function
      },
      sell: {
        type: Function
      },
      transfer: {
        type: Function
      },
      buy: {
        type: Function
      },
      approve: {
        type: Function
      },
      allow: {
        type: Boolean
      }
    })
    // console.log('prop==', props)
    let dialogTableVisible = ref(true)
    let input = ref(1000)
</script>

<style scoped lang="scss">
  .dialog :deep(.el-dialog) {
    width: 484px;
    /*height: 402px;*/
    /*padding-bottom: 25px;*/
  }
  .dialog :deep(.el-dialog__header) {
    display: flex;
    align-items: center;
  }
  .dialog :deep(.el-dialog__body) {
    padding: 0;
  }
  @media screen and (max-width: 750px) {
    .dialog :deep(.el-dialog) {
      width: 98%;
      /*height: 402px;*/
      /*padding-bottom: 25px;*/
    }
  }
</style>
